<!DOCTYPE html>
<html lang="en">

<head>
	<title>用户管理页</title>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
	<link rel="stylesheet" href="css/uniform.css" />
	<link rel="stylesheet" href="css/select2.css" />
	<link rel="stylesheet" href="css/matrix-style2.css" />
	<link rel="stylesheet" href="css/matrix-media.css" />
	<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
	<!-- <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'> -->
</head>

<body>

	<div id="content">
		<div id="content-header">
			<h1>用户信息管理</h1>
		</div>
		<div class="container-fluid">
			<div class="row-fluid">
				<div class="span12">

					<div class="widget-box">
						<div class="widget-title"> <span class="icon">
								<input type="checkbox" id="title-checkbox" name="title-checkbox" />
							</span>
							<h5>用户信息表</h5>
						</div>
						<div class="widget-content nopadding">
							<table class="table table-bordered table-striped with-check">
								<thead>
									<tr>
										<th><i class="icon-resize-vertical"></i></th>
										<th>uid</th>
										<th>用户名</th>
										<th>密码</th>
										<th>注册时间</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="tbody">
									<!-- <tr>
										<td><input type="checkbox" /></td>
										<td>1</td>
										<td contenteditable="true">张学友</td>
										<td>456123</td>
										<td class="center">34242777@qq.com</td>
										<td>
											<button type="submit" class="btn btn-danger">删除</button>
											<button type="submit" class="btn btn-info">修改</button>
											<button type="submit" class="btn btn-success">保存</button>
										</td>
									</tr> -->

								</tbody>
							</table>
						</div>
					</div>
					<input type="button" value="删除全部" id="delall">
					<div class="dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_full_numbers"
						id="DataTables_Table_0_paginate">
						<a tabindex="0"
							class="first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled"
							id="DataTables_Table_0_first">第一页</a>
						<a tabindex="0" class="previous fg-button ui-button ui-state-default ui-state-disabled"
							id="DataTables_Table_0_previous">上一页</a>
						<span id="pages">
							<!-- <a tabindex="0" class="fg-button ui-button ui-state-default ui-state-disabled">1</a>
							<a tabindex="0" class="fg-button ui-button ui-state-default">2</a> -->
						</span>


						<a tabindex="0" class="next fg-button ui-button ui-state-default"
							id="DataTables_Table_0_next">下一页</a>
						<a tabindex="0" class="last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default"
							id="DataTables_Table_0_last">最后一页</a>
					</div>

				</div>
			</div>
		</div>
	</div>

	<!-- <script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script> -->
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.ui.custom.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.uniform.js"></script>
	<script src="js/select2.min.js"></script>
	<script src="js/jquery.dataTables.min.js"></script>
	<script src="js/matrix.js"></script>
	<script src="js/matrix.tables.js"></script>
	<script>


		//需求：请求第一页数据渲染到页面
		$.ajax({
			type: 'get',
			url: '/users/all',
			data: {
				page: 1,
				num: 5
			},
			success: function (data) {
				console.log(data);
				create(data);
			}
		});

		function create(data) {
			let str = data.datalist.map(item => {
				return `<tr>
										<td><input type="checkbox" /></td>
										<td>${item.uid}</td>
										<td contenteditable="true">${item.name}</td>
										<td>${item.psw}</td>
										<td class="center">${item.regtime}</td>
										<td>
											<button type="submit" class="btn btn-danger">删除</button>
											<button type="submit" class="btn btn-info">修改</button>
											<button type="submit" class="btn btn-success">保存</button>
										</td>
									</tr>`;
			}).join('');
			$('#tbody').html(str);//渲染数据


			//生成页码
			let str2 = '';
			for (let i = 0; i < data.pages; i++) {
				str2 += `<a tabindex="0" class="fg-button ui-button ui-state-default">${i + 1}</a>`;
			}
			$('#pages').html(str2);
			$('#pages a').eq(0).addClass('ui-state-disabled');
		}

		//删除全部
		// $('#delall').on('click', () => {
		// 	$.ajax({
		// 		type : 'delete',
		// 		url : '/users/delall',
		// 		data : {
		// 			uid : 
		// 		}
		// 	})
		// });
	</script>
</body>

</html>